

<script setup lang="ts">
import { SessionInfo, RoleEnum, SiderMenuEnum } from '@/models/@types';
import { FormatDate, clipboardWriteText } from '@/utils/common.methods';
import { appRef } from '@/models/app.ref';
import { Message } from '@arco-design/web-vue';
import router from '@/router';
import { ref, watch } from 'vue';

const props = withDefaults(defineProps<{ sessions: SessionInfo[], isSend?: boolean, isGoodIdea?: boolean, isrefresh?: boolean, chunk?: string, isDel?: boolean }>(), {
  sessions: [] as any,
});
const emits = defineEmits(['send', 'remove', 'refresh', 'stopSend']);
// slots = ['select-model']

const chunkData = ref('');
watch(() => props.chunk, (newData) => {
  chunkData.value = newData;
});


function onCopy(richtext: string): void {
  clipboardWriteText(richtext).then(() => {
    Message.success('复制成功')
  })
}


function toMindMap(text: string): void {
  appRef.mindMap.add(SiderMenuEnum.Leaf);
  const curr = appRef.mindMap.currMenu;
  curr.originalWords = text;
  router.replace('/chat/mind-map');
}

</script>
<template>
  <div class="sessions">
    <Explanation v-if="!sessions?.length"></Explanation>
    <div class="item flex-c" v-for="item in sessions" :key="item.uid"
      :style="{ 'align-items': item.role === RoleEnum.User ? 'flex-end' : 'flex-start' }">
      <div class="top flex" v-if="item.role === RoleEnum.User">
        <a-popconfirm content="确认删除该记录吗?" type="error" v-if="isDel" @ok="emits('remove', item.uid)">
          <icon-delete class="icon" />
        </a-popconfirm>
        <icon-copy class="icon" @click="onCopy(item.richtext)" />
        <span class="date">{{ FormatDate(item.timestamp) }} </span>
        <img class="avatar" src="@/assets/images/user_avatar.webp" alt="">
      </div>
      <div class="top flex" v-else>
        <img class="avatar" src="@/assets/images/ai_avatar.webp" alt="">
        <span class="date">{{ FormatDate(item.timestamp) }} </span>
        <a-popconfirm content="确认删除该记录吗?" type="error" v-if="isDel" @ok="emits('remove', item.uid)">
          <icon-delete class="icon" />
        </a-popconfirm>
        <icon-copy class="icon" @click="onCopy(item.richtext)" />
        <icon-refresh class="icon" @click="emits('refresh', item.quote); chunkData = ''" v-if="isrefresh" />
        <icon-mind-mapping class="icon" @click="toMindMap(item.richtext)" />
      </div>
      <Markdown class="richtext" v-if="item.role === RoleEnum.User" :source="item.richtext" previewTheme="cyanosis" />
      <Markdown class="richtext ai-richtext" v-else :source="item.richtext" :reverse="true" />
    </div>
    <div class="item flex-c" :style="{ 'align-items': 'flex-start' }" v-if="isSend">
      <div class="top flex">
        <img class="avatar" src="@/assets/images/ai_avatar.webp" alt="">
        <span class="date">{{ FormatDate(Date.now()) }} </span>
      </div>
      <Markdown class="richtext ai-richtext" :reverse="true" :source="chunkData || '请稍候，数据请求中......'" />
    </div>
  </div>
</template>
<style lang='scss' scoped>
.sessions {
  width: 100%;
  flex: 1;

  .item {
    margin-bottom: 10px;
    width: 100%;

    .top {
      .date {
        margin: 0 10px;
        font-size: 12px;
        color: var(--color-neutral-6);
      }

      .icon {
        cursor: pointer;
        margin: 0 5px;
        font-size: 15px;
      }

      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }

    .richtext {
      width: auto;
      max-width: calc(100% - 80px);
      margin: 5px 40px;
      border-radius: 3px;
      line-height: 23px;
      word-break: break-all;
      background: rgb(var(--green-3));
      color: var(--color-neutral-10);
      border-radius: 3px;

      ::v-deep p {
        margin: 0;
      }
    }

    .ai-richtext {
      background: var(--color-neutral-10);
      color: var(--color-neutral-4);
    }
  }


}
</style>
